<script type="text/javascript">
	$(document).ready(function() {
		$('th#select_all input:checkbox').click(function(){
			//alert('checked');
			if(this.checked){
				$('input:checkbox').attr('checked','checked');
				$('#mass-action').show();
			}else{
				$('input:checkbox').removeAttr('checked');
				$('#mass-action').hide();
			}
		});
		$('input:checkbox').not('th#select_all input:checkbox').click(function(){
			countChecked();
		});
		
		countChecked();	
		$('div.media').hover(function(){
			$(this).find('div.menu-hover').show();
		},function(){
			$(this).find('div.menu-hover').hide();
		});
		
		$('#addModal').on('hidden', function() {
			$(this).data('modal').$element.removeData();
		});
		$('#editModal').on('hidden', function() {
			$(this).data('modal').$element.removeData();
		});
		$('#deleteModal').on('hidden', function() {
			$(this).data('modal').$element.removeData();
		});
	});
	function countChecked(){
		count_checked = $('input:checked').not('#select_all input:checkbox').length;
		if(count_checked >= 1){
			$('#mass-action').show();
		}else{
			$('#select_all input:checkbox').removeAttr('checked');
			$('#mass-action').hide();
		}
	}
</script>
<div class="container">	
	<div class="page-header">
	  <h2>
		Index
		<small>
			<form class="form-inline pull-right">
			<input type="text" placeholder="Text input" class='pull-right'>
			</form>
		</small>
		</h2>	  
	</div>
	<?php echo $this->Session->flash('flash', array('element' => $this->Session->read('status')));?>
	<div class="btn-toolbar pull-left" style="margin: 0;display:none;" id='mass-action'>
		<div class="btn-group">
			<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
				Action
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
			</ul>
		</div>
	</div>
	<div class="btn-toolbar pull-right" style="margin: 0;">
		<div class="btn-group">
			<button class="btn">Filters  <i class="icon-resize-small"></i></button>
		</div>
		<div class="btn-group">
			<button class="btn">Bots  <i class="icon-resize-full"></i></button>
		</div>
		<div class="btn-group">
			<a data-remote="/tests/add" role="button" class="btn" id='add' data-toggle="modal" data-target="#addModal" data-cache='false'><i class="icon-plus-sign"></i> Add</a>
		</div>
	</div><br /><br />
	<div>
	
	<div class="media">
	  <input type="checkbox" class="pull-left">
	  <a href="#" class="pull-left">
		<img src="http://placehold.it/64x64" class="media-object">
	  </a>
	  <div class="media-body">
		<h4 class="media-heading">
			<a href='/tests/view'>Media heading</a>
			<small>
				<div class="dropdown menu-hover pull-right" style='display:none;z-index:100;'>
					<a class="dropdown-toggle icon-chevron-down pull-right" data-toggle="dropdown" href="#" data-placement="right"></a>
					<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
						<li><a data-remote="/tests/edit" role="button" class="" data-toggle="modal" data-target="#editModal" data-cache='false'>Edit</a></li>
						<li><a data-remote="/tests/deleteConfirm" role="button" class="" data-toggle="modal" data-target="#deleteModal" data-cache='false'>Delete</a></li>
					</ul>
				</div>
			</small>
		</h4>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
	  </div>
	</div>
	<hr />
	<div class="media">
	  <input type="checkbox" class="pull-left">
	  <a href="#" class="pull-left">
		<img src="http://placehold.it/64x64" class="media-object">
	  </a>
	  <div class="media-body">
		<h4 class="media-heading">
			<a href='/tests/view'>Media heading</a>
			<small>
				<div class="dropdown menu-hover pull-right" style='display:none;'>
					<a class="dropdown-toggle icon-chevron-down pull-right" data-toggle="dropdown" href="#" data-placement="right"></a>
					<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
						<li><a data-remote="/tests/edit" role="button" class="" data-toggle="modal" data-target="#editModal" data-cache='false'>Edit</a></li>
						<li><a data-remote="/tests/deleteConfirm" role="button" class="" data-toggle="modal" data-target="#deleteModal" data-cache='false'>Delete</a></li>
					</ul>
				</div>
			</small>
		</h4>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
	  </div>
	</div>
    
    <div class="pagination pagination-centered">
	  <ul>
		<li><a href="#">Prev</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">Next</a></li>
	  </ul>
	</div>
	</div>
</div>
<div id="addModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
	<div class="modal-body"></div>
</div>
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
	<div class="modal-body"></div>
</div>
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
	<div class="modal-body"></div>
</div>
